A zooming user interface (ZUI) is a type of graphical user interface (GUI) in which the scale of a viewed area is changed in order to view more detail or less, and to browse through and among different visual display elements such as images, shapes, documents, or videos. Display elements may be added to a workspace referred to as a ‘canvas’ to create a zoomable presentation in which details and subtopics can be presented through zooming in and out to reveal more or less detail. Typically, the canvas is larger than a viewing window generated on a device display screen, and a user can scroll a viewing window to view different display elements disposed on different regions of the canvas. The ZUI differs from a normal canvas in that the user may zoom in or out onto a particular display element. Display elements can be inserted anywhere among the presentation content. Users can pan across the canvas in two dimensions (in 2D) and zoom into objects of interest. Display elements present inside a zoomed region can in turn be zoomed themselves to reveal additional detail, allowing for recursive nesting and an arbitrary level of zoom. For example, as a user zooms into a text object, the text may be represented initially as a small dot, then as a thumbnail image, next as a complete page and finally as a magnified view of a portion of the page focused on a key passage from the text. Thus, ZUIs use zooming as the primary metaphor for browsing through multivariate or hyperlinked information, for example.
FIGS. 1A-1C are illustrative drawings showing three different portions of a canvas at three different zoom levels viewed through a viewing window. FIG. 1A shows a viewing window 3 through which portions of display elements 4 and 6 disposed on a canvas 2 are visible but in which display elements 8-14 on the canvas 2 are not visible. The four arrows in FIG. 1A indicate the ability to move the viewing window so as to pan across the canvas 2. FIG. 1B shows a zoomed out view of the same canvas 2 in which display elements 4-14 are visible through the viewing window 3. FIG. 1C shows a zoomed in view of display element 6 on the same canvas 2 through the viewing window 3.
FIG. 2 is an illustrative drawing representing a ZUI that includes multiple image layers located at respective planes useful to generate a 3D effect according to some embodiments. The canvas is represented as a canvas layer 220, the canvas layer 220 located in a canvas (imaging) plane. One or more additional backgrounds layers are located in respective background (imaging) planes. More particularly, in the example in FIG. 2, the canvas layer 220 is shown including display elements 230, 232, and 234. Display element 230 comprises a topmost background layer 224. Display element 232 comprises a middle background layer 226. Display element 234 comprises a bottom background layer 228. As an example, when the zoom level is appropriate for the display element 234 to occupy most or all of the viewing window area, the background content contribution from the background layers 222 may be as follows: 0% from topmost background layer 224, 20% from middle background layer 226, and 80% from bottom background layer 228. The gradual transitioning between background layers or the mixture of relevant background layers is achieved with different opacity levels for respective background layers.
In addition to matching up certain background layer(s) as the “dominant” background layer(s) to a given display element of the canvas layer 220 in accordance with the size of the display element relative to the size of all the other display elements, determining which image portion/area/region of the “dominant” background layer(s) (also referred to as the background crop) to display with the given display element is based on the given display element's relative position in the current bounding box of the canvas (active canvas area). As shown in FIG. 5B, the display element 230 is positioned in the bottom left region of the overall active canvas area. A background crop 240 correspondingly comes from the bottom left region of the “dominant” top background layer 224. The display element 232 positioned in the top middle region of the overall active canvas area, means that a background crop 232 in the “dominant” middle background layer 226 is taken from the top middle region of the middle background layer 226. The region of the bottom background layer 228 for a background crop 244 for the display element 234 is similarly determined. Also note that the size of background crop 240 is larger than background crop 242, and background crop 242 is larger than background crop 244, corresponding to the size differential among its respective display elements 230, 232, 234.
Once a given background crop is rendered with its display element, to maintain the parallax effect, the amount of horizontal (x-axis direction) or vertical (y-axis direction) motion is relaxed for the background layer(s) compared to the amount of such motion on the canvas layer. For example, if a user pans or moves along the canvas 100 units to the right, the background crop of the “dominant” background layer(s) is taken from 10 units to the right of the previous background crop location on the “dominant” background layer(s) instead of 100 units to the right as in the canvas.
Renderings 250, 252, and 254 shown in FIG. 2 comprise content displayed in the viewing window (e.g., main area 220 of FIG. 2) when the zoom level and pan position are set to display all of each of display elements 230, 232, 234, respectively, within the respective viewing window. Rendering 250 shows display element 230 displayed with background crop 240. Rendering 252 shows display element 232 displayed with background crop 242. Rendering 254 shows display element 234 displayed with background crop 244. Alternatively, renderings 250, 252, 254 can comprise thumbnails or snapshots of certain area or content of the presentation at certain zoom level that are generated by the user FIG. 2. An example multiple layer ZUI is further described in commonly owned pending patent application Ser. No. 12/467,702, entitled, 3D RENDERING IN A ZUI ENVIRONMENT, filed May 31, 2013, which is expressly incorporated herein in its entirety by this reference.